<template>
  <v-app-bar app color="#F5F5F5">
    <div class="d-flex align-center">
      <v-btn small icon>
        <v-badge color="pink" dot overlap>
          <v-icon color="#2AB795" dark>mdi-bell</v-icon>
        </v-badge>
      </v-btn>
    </div>

    <v-spacer></v-spacer>
    Mall 商城
    <v-spacer></v-spacer>

    <div class="d-flex align-center">
      <v-btn small icon>
        <v-icon dark color="#2AB795" style="margin-right: 10px"
          >mdi-magnify</v-icon
        >
      </v-btn>
      <v-btn small icon @click="$router.push('/shoppingCart')">
        <v-badge
          color="pink"
          overlap
          :content="String(this.$store.state.shoppingCartItems.length)"
        >
          <v-icon color="#2AB795" dark>mdi-cart</v-icon>
        </v-badge>
      </v-btn>
    </div>
  </v-app-bar>
</template>

<script>
import request from '@/request/index.ts';

export default {
  name: 'app-topbar',
  created() {
    this.$store.dispatch('refreshShoppingCartItems');
  }
};
</script>
